<template>
  <div class="beauty-salon-list">
    <!-- 我的美容院 -->
    <!-- 页面头部 -->
    <div class="page-header">
      <h2 class="page-title">我的美容院列表</h2>
      <div class="header-actions">
        <!-- <el-button type="primary"  icon="Plus">门店期初</el-button> -->
          <el-button type="primary" plain  icon="Plus" @click="openAddDialog">新增美容院</el-button>
        <el-button type="text" @click="handleReturn">返回</el-button>
      </div>
    </div>

    <!-- 筛选区域：卡片式布局，分组清晰 -->
    <div class="filter-card">
      <div class="filter-row">
        <!-- 品牌筛选组 -->
        <div class="filter-group">
          <label class="filter-label">品牌：</label>
          <el-checkbox-group v-model="selectedBrands" class="checkbox-group">
            <el-checkbox label="品牌A" border >品牌A</el-checkbox>
            <el-checkbox label="品牌B" border >品牌B</el-checkbox>
            <el-checkbox label="品牌C" border >品牌C</el-checkbox>
          </el-checkbox-group>
        </div>

        <!-- 地区筛选组 -->
        <div class="filter-group">
          <label class="filter-label">地区：</label>
          <div class="region-select-group">
            <el-select 
              placeholder="省" 
              v-model="province" 
               
              @change="loadCities"
              class="region-select"
            >
              <el-option label="请选择" value=""></el-option>
              <el-option v-for="item in provinces" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <el-select 
              placeholder="市" 
              v-model="city" 
               
              @change="loadDistricts"
              class="region-select"
              :disabled="!province"
            >
              <el-option label="请选择" value=""></el-option>
              <el-option v-for="item in cities" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <el-select 
              placeholder="区" 
              v-model="district" 
               
              @change="loadCounties"
              class="region-select"
              :disabled="!city"
            >
              <el-option label="请选择" value=""></el-option>
              <el-option v-for="item in districts" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <el-select 
              placeholder="县" 
              v-model="county" 
              
              class="region-select"
              :disabled="!district"
            >
              <el-option label="请选择" value=""></el-option>
              <el-option v-for="item in counties" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </div>
        </div>
      </div>

      <div class="filter-row">
        <!-- 搜索与重置组 -->
        <div class="filter-group search-group">
          <label class="filter-label">搜索：</label>
          <el-input 
            v-model="searchKeyword" 
            placeholder="输入名称/联系人/电话" 
            
            prefix-icon="Search"
            class="search-input"
            @keyup.enter="handleSearch"
          />
          <el-button type="primary"  @click="handleSearch">查询</el-button>
          <el-button type="default"  @click="resetFilter">重置</el-button>
        </div>
      </div>
    </div>

    <!-- 批量操作区域：与表格间距合理，按钮分组 -->
    <div class="batch-action-bar">
     
      <div class="batch-danger-group">
        <el-button 
          type="warning" 
          plain 
           
          icon="Lock" 
          @click="handleBatchBlacklist" 
          :disabled="selectedRows.length === 0"
        >
          批量拉黑
        </el-button>
        <el-button 
          type="danger" 
          plain 
           
          icon="Delete" 
          @click="handleBatchDelete" 
          :disabled="selectedRows.length === 0"
        >
          批量删除
        </el-button>
      </div>
    </div>

    <!-- 数据表格：优化表头样式，操作列按钮间距 -->
    <div class="table-container">
      <el-table
        :data="filteredTableData"
        border
        stripe
        style="width: 100%"
        :header-cell-style="tableHeaderStyle"
        :cell-style="tableCellStyle"
        @selection-change="handleSelectionChange"
        
      >
        <el-table-column type="selection"  align="center"  />
        <el-table-column label="序号" type="index"  align="center" width="60" />
        <el-table-column prop="id" label="ID"  align="center" />
        <el-table-column prop="name" label="名称" align="center"  />
        <el-table-column prop="contact" label="联系人" align="center" />
        <el-table-column prop="phone" label="电话" align="center"  />
        <el-table-column prop="coBrand" label="合作品牌" align="center" />
        <el-table-column prop="beautyTutor" label="美容导师" align="center" />
        <el-table-column prop="brandManager" label="品牌经理" align="center" />
        <el-table-column prop="annualAccount" label="年单账户" align="center"  />
        <el-table-column prop="policyAccount" label="政策账户" align="center"  />
        <el-table-column prop="cashAccount" label="现金账户" align="center"  />
        <el-table-column prop="retailAccount" label="零售价账户" align="center"  width="100" />
        <el-table-column prop="deliveryAccount" label="配送账户" align="center"  />
        <el-table-column prop="giftCash" label="赠送现金" align="center"  />
        <el-table-column prop="arrears" label="欠款" align="center"  />
        <el-table-column prop="address" label="地址" align="center"  />
        <el-table-column label="操作" align="center" width="320"  fixed="right">
          <template #default="scope">
            <el-button type="primary" plain size="mini" @click="viewDetail(scope.row)">明细</el-button>
            <el-button type="success" plain size="mini" @click="openEditDialog(scope.row)">修改</el-button>
            <el-button type="warning" plain size="mini" @click="handleBlacklist(scope.row)">拉黑</el-button>
            <el-button type="danger" plain size="mini" @click="openDeleteDialog(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 合计行：与表格样式统一，突出合计文本 -->
      <div class="total-row">
        <div class="total-cell total-label" :style="{ width: '50px' }">合计</div>
        <div class="total-cell" :style="{ width: '60px' }">-</div>
        <div class="total-cell" :style="{ width: '90px' }">-</div>
        <div class="total-cell" :style="{ minWidth: '120px' }">-</div>
        <div class="total-cell" :style="{ width: '110px' }">-</div>
        <div class="total-cell" :style="{ width: '130px' }">-</div>
        <div class="total-cell" :style="{ width: '110px' }">-</div>
        <div class="total-cell" :style="{ width: '110px' }">-</div>
        <div class="total-cell" :style="{ width: '110px' }">-</div>
        <div class="total-cell" :style="{ width: '120px' }">¥9,999.99</div>
        <div class="total-cell" :style="{ width: '120px' }">¥9,999.99</div>
        <div class="total-cell" :style="{ width: '120px' }">¥9,999.99</div>
        <div class="total-cell" :style="{ width: '130px' }">¥9,999.99</div>
        <div class="total-cell" :style="{ width: '120px' }">¥9,999.99</div>
        <div class="total-cell" :style="{ width: '120px' }">¥9,999.99</div>
        <div class="total-cell" :style="{ width: '120px' }">¥9,999.99</div>
        <div class="total-cell" :style="{ minWidth: '180px' }">-</div>
        <div class="total-cell" :style="{ width: '220px' }">-</div>
      </div>
    </div>

    <!-- 分页区域：居中对齐，优化间距 -->
    <div class="pagination-container">
      <div class="pagination-info">共 {{ filteredTotal }} 条 / 共 {{ totalPages }} 页</div>
      <el-pagination
        background
        :current-page="currentPage"
        :page-sizes="[10, 20, 50]"
        :page-size="pageSize"
        layout="prev, pager, next, jumper, ->, sizes, total"
        :total="filteredTotal"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        
      />
      <div class="jump-page">
        <span>跳至</span>
        <el-input-number 
          v-model="jumpPage" 
          :min="1" 
          :max="totalPages" 
           
          class="jump-input"
        />
        <el-button type="primary"  @click="jumpToPage">确定</el-button>
      </div>
    </div>

    <!-- 新增/编辑弹窗：分栏布局，分组清晰，优化表单间距 -->
    <el-dialog
      v-model="formDialogVisible"
      :title="dialogTitle"
      width="1200px"
      :close-on-click-modal="false"
      destroy-on-close
       :header-cell-style="tableHeaderStyle"
        :cell-style="tableCellStyle"
    >
      <el-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        label-width="110px"
        
        class="salon-form"
      >
        <!-- 基础信息栏：2列布局 -->
        <div class="form-section">
          <h4 class="section-title">基础信息</h4>
          <div class="form-row">
            <el-form-item label="ID" prop="id" class="form-item">
              <el-input v-model="formData.id" :disabled="isEdit" placeholder="新增时自动生成" />
            </el-form-item>
            <el-form-item label="门店名称" prop="name" class="form-item">
              <el-input v-model="formData.name" placeholder="请输入门店名称" />
            </el-form-item>
          </div>
          <div class="form-row">
            <el-form-item label="联系人" prop="contact" class="form-item">
              <el-input v-model="formData.contact" placeholder="请输入联系人" />
            </el-form-item>
            <el-form-item label="联系电话" prop="phone" class="form-item">
              <el-input v-model="formData.phone" placeholder="请输入11位手机号" />
            </el-form-item>
          </div>
          <div class="form-row">
            <el-form-item label="合作品牌" prop="coBrand" class="form-item">
              <el-select v-model="formData.coBrand" placeholder="请选择合作品牌">
                <el-option label="阿迪" value="阿迪" />
                <el-option label="品牌B" value="品牌B" />
                <el-option label="品牌C" value="品牌C" />
              </el-select>
            </el-form-item>
            <el-form-item label="门店地址" prop="address" class="form-item">
              <el-input v-model="formData.address" placeholder="请输入详细地址（如XX路XX号）" />
            </el-form-item>
          </div>
        </div>

        <!-- 人员信息栏：2列布局 -->
        <div class="form-section">
          <h4 class="section-title">人员信息</h4>
          <div class="form-row">
            <el-form-item label="美容导师" prop="beautyTutor" class="form-item">
              <el-input v-model="formData.beautyTutor" placeholder="请输入美容导师姓名" />
            </el-form-item>
            <el-form-item label="品牌经理" prop="brandManager" class="form-item">
              <el-input v-model="formData.brandManager" placeholder="请输入品牌经理姓名" />
            </el-form-item>
          </div>
        </div>

        <!-- 地区选择栏：横向布局，与筛选区风格统一 -->
        <div class="form-section">
          <h4 class="section-title">地区选择</h4>
          <div class="form-row region-form-row">
            <el-form-item label="所在地区" prop="province" class="region-form-item">
              <el-select 
                v-model="formData.province" 
                placeholder="省" 
                @change="loadFormCities"
              >
                <el-option label="请选择" value=""></el-option>
                <el-option v-for="item in provinces" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="city" class="region-form-item" :rules="[
              { required: true, message: '请选择城市', trigger: 'change' }
            ]">
              <el-select 
                v-model="formData.city" 
                placeholder="市" 
                @change="loadFormDistricts"
                :disabled="!formData.province"
              >
                <el-option label="请选择" value=""></el-option>
                <el-option v-for="item in formCities" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="district" class="region-form-item" :rules="[
              { required: true, message: '请选择区域', trigger: 'change' }
            ]">
              <el-select 
                v-model="formData.district" 
                placeholder="区" 
                @change="loadFormCounties"
                :disabled="!formData.city"
              >
                <el-option label="请选择" value=""></el-option>
                <el-option v-for="item in formDistricts" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="county" class="region-form-item" :rules="[
              { required: true, message: '请选择县区', trigger: 'change' }
            ]">
              <el-select 
                v-model="formData.county" 
                placeholder="县"
                :disabled="!formData.district"
              >
                <el-option label="请选择" value=""></el-option>
                <el-option v-for="item in formCounties" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>

        <!-- 账户信息栏：3列布局，紧凑展示 -->
        <div class="form-section">
          <h4 class="section-title">账户信息</h4>
          <div class="form-row">
            <el-form-item label="年单账户" prop="annualAccount" class="form-item account-item">
              <el-input v-model="formData.annualAccount" placeholder="格式：¥XXX.XX" />
            </el-form-item>
            <el-form-item label="政策账户" prop="policyAccount" class="form-item account-item">
              <el-input v-model="formData.policyAccount" placeholder="格式：¥XXX.XX" />
            </el-form-item>
            <el-form-item label="现金账户" prop="cashAccount" class="form-item account-item">
              <el-input v-model="formData.cashAccount" placeholder="格式：¥XXX.XX" />
            </el-form-item>
          </div>
          <div class="form-row">
            <el-form-item label="零售价账户" prop="retailAccount" class="form-item account-item">
              <el-input v-model="formData.retailAccount" placeholder="格式：¥XXX.XX" />
            </el-form-item>
            <el-form-item label="配送账户" prop="deliveryAccount" class="form-item account-item">
              <el-input v-model="formData.deliveryAccount" placeholder="格式：¥XXX.XX" />
            </el-form-item>
            <el-form-item label="赠送现金" prop="giftCash" class="form-item account-item">
              <el-input v-model="formData.giftCash" placeholder="格式：¥XXX.XX" />
            </el-form-item>
          </div>
          <div class="form-row">
            <el-form-item label="欠款" prop="arrears" class="form-item account-item">
              <el-input v-model="formData.arrears" placeholder="格式：¥XXX.XX" />
            </el-form-item>
          </div>
        </div>
      </el-form>

      <template #footer>
        <el-button @click="formDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">保存</el-button>
      </template>
    </el-dialog>

    <!-- 删除确认弹窗 -->
    <el-dialog
      v-model="deleteDialogVisible"
      title="确认删除"
      width="300px"
      :close-on-click-modal="false"
    >
      <p>确定要删除 <span class="text-warning">{{ deleteTarget?.name }}</span> 吗？</p>
      <p class="text-danger">此操作不可撤销，删除后数据将永久丢失</p>
      <template #footer>
        <el-button @click="deleteDialogVisible = false">取消</el-button>
        <el-button type="danger" @click="confirmDelete">确认删除</el-button>
      </template>
    </el-dialog>

    <!-- 拉黑确认弹窗 -->
    <el-dialog
      v-model="blacklistDialogVisible"
      title="确认拉黑"
      width="300px"
      :close-on-click-modal="false"
    >
      <p>确定要将 <span class="text-warning">{{ blacklistTarget?.name }}</span> 拉黑吗？</p>
      <p class="text-danger">拉黑后该美容院将无法进行业务操作</p>
      <template #footer>
        <el-button @click="blacklistDialogVisible = false">取消</el-button>
        <el-button type="warning" @click="confirmBlacklist">确认拉黑</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, watch } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import router from '../../../router';

// 地区数据模拟
const provinces = ref([
  { label: '江苏省', value: '江苏省' },
  { label: '浙江省', value: '浙江省' },
  { label: '广东省', value: '广东省' }
]);
const cities = ref([]);
const districts = ref([]);
const counties = ref([]);

// 表单地区数据
const formCities = ref([]);
const formDistricts = ref([]);
const formCounties = ref([]);

// 加载城市列表
const loadCities = (province) => {
  if (province === '江苏省') {
    cities.value = [
      { label: '南京市', value: '南京市' },
      { label: '苏州市', value: '苏州市' }
    ];
  } else if (province === '浙江省') {
    cities.value = [
      { label: '杭州市', value: '杭州市' },
      { label: '宁波市', value: '宁波市' }
    ];
  } else if (province === '广东省') {
    cities.value = [
      { label: '广州市', value: '广州市' },
      { label: '深圳市', value: '深圳市' }
    ];
  } else {
    cities.value = [];
  }
  district.value = '';
  county.value = '';
};

// 加载区域列表
const loadDistricts = (city) => {
  if (city === '南京市') {
    districts.value = [
      { label: '建邺区', value: '建邺区' },
      { label: '鼓楼区', value: '鼓楼区' }
    ];
  } else if (city === '苏州市') {
    districts.value = [
      { label: '工业园区', value: '工业园区' },
      { label: '虎丘区', value: '虎丘区' }
    ];
  } else if (city === '杭州市') {
    districts.value = [
      { label: '西湖区', value: '西湖区' },
      { label: '余杭区', value: '余杭区' }
    ];
  } else if (city === '宁波市') {
    districts.value = [
      { label: '鄞州区', value: '鄞州区' },
      { label: '海曙区', value: '海曙区' }
    ];
  } else if (city === '广州市') {
    districts.value = [
      { label: '天河区', value: '天河区' },
      { label: '越秀区', value: '越秀区' }
    ];
  } else if (city === '深圳市') {
    districts.value = [
      { label: '南山区', value: '南山区' },
      { label: '福田区', value: '福田区' }
    ];
  } else {
    districts.value = [];
  }
  county.value = '';
};

// 加载县区列表
const loadCounties = (district) => {
  if (district === '建邺区') {
    counties.value = [
      { label: '新街口', value: '新街口' },
      { label: '奥体中心', value: '奥体中心' }
    ];
  } else if (district === '鼓楼区') {
    counties.value = [
      { label: '湖南路', value: '湖南路' },
      { label: '三牌楼', value: '三牌楼' }
    ];
  } else if (district === '工业园区') {
    counties.value = [
      { label: '金鸡湖', value: '金鸡湖' },
      { label: '独墅湖', value: '独墅湖' }
    ];
  } else if (district === '虎丘区') {
    counties.value = [
      { label: '狮山', value: '狮山' },
      { label: '浒墅关', value: '浒墅关' }
    ];
  } else if (district === '西湖区') {
    counties.value = [
      { label: '西溪', value: '西溪' },
      { label: '转塘', value: '转塘' }
    ];
  } else if (district === '余杭区') {
    counties.value = [
      { label: '未来科技城', value: '未来科技城' },
      { label: '临平', value: '临平' }
    ];
  } else if (district === '鄞州区') {
    counties.value = [
      { label: '东部新城', value: '东部新城' },
      { label: '南部商务区', value: '南部商务区' }
    ];
  } else if (district === '海曙区') {
    counties.value = [
      { label: '天一广场', value: '天一广场' },
      { label: '鼓楼', value: '鼓楼' }
    ];
  } else if (district === '天河区') {
    counties.value = [
      { label: '珠江新城', value: '珠江新城' },
      { label: '体育西', value: '体育西' }
    ];
  } else if (district === '越秀区') {
    counties.value = [
      { label: '北京路', value: '北京路' },
      { label: '中华广场', value: '中华广场' }
    ];
  } else if (district === '南山区') {
    counties.value = [
      { label: '科技园', value: '科技园' },
      { label: '后海', value: '后海' }
    ];
  } else if (district === '福田区') {
    counties.value = [
      { label: 'CBD', value: 'CBD' },
      { label: '车公庙', value: '车公庙' }
    ];
  } else {
    counties.value = [];
  }
};

// 加载表单城市列表
const loadFormCities = (province) => {
  if (province === '江苏省') {
    formCities.value = [
      { label: '南京市', value: '南京市' },
      { label: '苏州市', value: '苏州市' }
    ];
  } else if (province === '浙江省') {
    formCities.value = [
      { label: '杭州市', value: '杭州市' },
      { label: '宁波市', value: '宁波市' }
    ];
  } else if (province === '广东省') {
    formCities.value = [
      { label: '广州市', value: '广州市' },
      { label: '深圳市', value: '深圳市' }
    ];
  } else {
    formCities.value = [];
  }
  formData.city = '';
  formData.district = '';
  formData.county = '';
};

// 加载表单区域列表
const loadFormDistricts = (city) => {
  if (city === '南京市') {
    formDistricts.value = [
      { label: '建邺区', value: '建邺区' },
      { label: '鼓楼区', value: '鼓楼区' }
    ];
  } else if (city === '苏州市') {
    formDistricts.value = [
      { label: '工业园区', value: '工业园区' },
      { label: '虎丘区', value: '虎丘区' }
    ];
  } else if (city === '杭州市') {
    formDistricts.value = [
      { label: '西湖区', value: '西湖区' },
      { label: '余杭区', value: '余杭区' }
    ];
  } else if (city === '宁波市') {
    formDistricts.value = [
      { label: '鄞州区', value: '鄞州区' },
      { label: '海曙区', value: '海曙区' }
    ];
  } else if (city === '广州市') {
    formDistricts.value = [
      { label: '天河区', value: '天河区' },
      { label: '越秀区', value: '越秀区' }
    ];
  } else if (city === '深圳市') {
    formDistricts.value = [
      { label: '南山区', value: '南山区' },
      { label: '福田区', value: '福田区' }
    ];
  } else {
    formDistricts.value = [];
  }
  formData.district = '';
  formData.county = '';
};

// 加载表单县区列表
const loadFormCounties = (district) => {
  if (district === '建邺区') {
    formCounties.value = [
      { label: '新街口', value: '新街口' },
      { label: '奥体中心', value: '奥体中心' }
    ];
  } else if (district === '鼓楼区') {
    formCounties.value = [
      { label: '湖南路', value: '湖南路' },
      { label: '三牌楼', value: '三牌楼' }
    ];
  } else if (district === '工业园区') {
    formCounties.value = [
      { label: '金鸡湖', value: '金鸡湖' },
      { label: '独墅湖', value: '独墅湖' }
    ];
  } else if (district === '虎丘区') {
    formCounties.value = [
      { label: '狮山', value: '狮山' },
      { label: '浒墅关', value: '浒墅关' }
    ];
  } else if (district === '西湖区') {
    formCounties.value = [
      { label: '西溪', value: '西溪' },
      { label: '转塘', value: '转塘' }
    ];
  } else if (district === '余杭区') {
    formCounties.value = [
      { label: '未来科技城', value: '未来科技城' },
      { label: '临平', value: '临平' }
    ];
  } else if (district === '鄞州区') {
    formCounties.value = [
      { label: '东部新城', value: '东部新城' },
      { label: '南部商务区', value: '南部商务区' }
    ];
  } else if (district === '海曙区') {
    formCounties.value = [
      { label: '天一广场', value: '天一广场' },
      { label: '鼓楼', value: '鼓楼' }
    ];
  } else if (district === '天河区') {
    formCounties.value = [
      { label: '珠江新城', value: '珠江新城' },
      { label: '体育西', value: '体育西' }
    ];
  } else if (district === '越秀区') {
    formCounties.value = [
      { label: '北京路', value: '北京路' },
      { label: '中华广场', value: '中华广场' }
    ];
  } else if (district === '南山区') {
    formCounties.value = [
      { label: '科技园', value: '科技园' },
      { label: '后海', value: '后海' }
    ];
  } else if (district === '福田区') {
    formCounties.value = [
      { label: 'CBD', value: 'CBD' },
      { label: '车公庙', value: '车公庙' }
    ];
  } else {
    formCounties.value = [];
  }
};

// 筛选条件
const selectedBrands = ref([]);
const province = ref('');
const city = ref('');
const district = ref('');
const county = ref('');
const searchKeyword = ref('');

// 表格数据
const tableData = ref([
  {
    id: 'Mcc01',
    name: '门店名1',
    contact: '联系人1',
    phone: '李丽丽',
    coBrand: '阿迪',
    beautyTutor: '陈辉',
    brandManager: '经理A',
    annualAccount: '¥1287.90',
    policyAccount: '¥2984.90',
    cashAccount: '¥4982.90',
    retailAccount: '¥5987.90',
    deliveryAccount: '¥1287.90',
    giftCash: '¥1220.53',
    arrears: '¥1453.34',
    address: '江苏省南京市建邺区新街口199号A栋',
    province: '江苏省',
    city: '南京市',
    district: '建邺区',
    county: '新街口'
  },
  {
    id: 'Mcc02',
    name: '门店名2',
    contact: '联系人2',
    phone: '王小明',
    coBrand: '品牌B',
    beautyTutor: '张三',
    brandManager: '经理B',
    annualAccount: '¥2287.90',
    policyAccount: '¥3984.90',
    cashAccount: '¥5982.90',
    retailAccount: '¥6987.90',
    deliveryAccount: '¥2287.90',
    giftCash: '¥2220.53',
    arrears: '¥2453.34',
    address: '浙江省杭州市西湖区西溪路200号',
    province: '浙江省',
    city: '杭州市',
    district: '西湖区',
    county: '西溪'
  },
  {
    id: 'Mcc03',
    name: '门店名3',
    contact: '联系人3',
    phone: '赵小刚',
    coBrand: '品牌C',
    beautyTutor: '李四',
    brandManager: '经理C',
    annualAccount: '¥3287.90',
    policyAccount: '¥4984.90',
    cashAccount: '¥6982.90',
    retailAccount: '¥7987.90',
    deliveryAccount: '¥3287.90',
    giftCash: '¥3220.53',
    arrears: '¥3453.34',
    address: '广东省深圳市南山区科技园路300号',
    province: '广东省',
    city: '深圳市',
    district: '南山区',
    county: '科技园'
  },
  {
    id: 'Mcc04',
    name: '门店名4',
    contact: '联系人4',
    phone: '刘小红',
    coBrand: '阿迪',
    beautyTutor: '王五',
    brandManager: '经理A',
    annualAccount: '¥4287.90',
    policyAccount: '¥5984.90',
    cashAccount: '¥7982.90',
    retailAccount: '¥8987.90',
    deliveryAccount: '¥4287.90',
    giftCash: '¥4220.53',
    arrears: '¥4453.34',
    address: '江苏省苏州市工业园区金鸡湖路400号',
    province: '江苏省',
    city: '苏州市',
    district: '工业园区',
    county: '金鸡湖'
  }
]);

// 分页
const currentPage = ref(1);
const pageSize = ref(10);
const jumpPage = ref(1);
const selectedRows = ref([]);
 
// 筛选后的数据
const filteredTableData = computed(() => {
  let result = [...tableData.value];
  
  // 品牌筛选
  if (selectedBrands.value.length > 0) {
    result = result.filter(item => selectedBrands.value.includes(item.coBrand));
  }
  
  // 地区筛选
  if (province.value) {
    result = result.filter(item => item.province === province.value);
  }
  if (city.value) {
    result = result.filter(item => item.city === city.value);
  }
  if (district.value) {
    result = result.filter(item => item.district === district.value);
  }
  if (county.value) {
    result = result.filter(item => item.county === county.value);
  }
  
  // 关键词搜索
  if (searchKeyword.value) {
    const keyword = searchKeyword.value.toLowerCase();
    result = result.filter(item => 
      item.name.toLowerCase().includes(keyword) || 
      item.contact.toLowerCase().includes(keyword) || 
      item.phone.toLowerCase().includes(keyword)
    );
  }
  
  // 分页处理
  const startIndex = (currentPage.value - 1) * pageSize.value;
  return result.slice(startIndex, startIndex + pageSize.value);
});

// 筛选后的总条数
const filteredTotal = computed(() => {
  let result = [...tableData.value];
  
  if (selectedBrands.value.length > 0) {
    result = result.filter(item => selectedBrands.value.includes(item.coBrand));
  }
  
  if (province.value) {
    result = result.filter(item => item.province === province.value);
  }
  if (city.value) {
    result = result.filter(item => item.city === city.value);
  }
  if (district.value) {
    result = result.filter(item => item.district === district.value);
  }
  if (county.value) {
    result = result.filter(item => item.county === county.value);
  }
  
  if (searchKeyword.value) {
    const keyword = searchKeyword.value.toLowerCase();
    result = result.filter(item => 
      item.name.toLowerCase().includes(keyword) || 
      item.contact.toLowerCase().includes(keyword) || 
      item.phone.toLowerCase().includes(keyword)
    );
  }
  
  return result.length;
});

// 总页数
const totalPages = computed(() => {
  return Math.ceil(filteredTotal.value / pageSize.value);
});

// 表单相关
const formDialogVisible = ref(false);
const dialogTitle = ref('新增美容院');
const formRef = ref(null);
const isEdit = ref(false);
const formData = reactive({
  id: '',
  name: '',
  contact: '',
  phone: '',
  coBrand: '',
  beautyTutor: '',
  brandManager: '',
  annualAccount: '',
  policyAccount: '',
  cashAccount: '',
  retailAccount: '',
  deliveryAccount: '',
  giftCash: '',
  arrears: '',
  address: '',
  province: '',
  city: '',
  district: '',
  county: ''
});

// 表单验证规则
const formRules = reactive({
  id: [
    { required: !isEdit.value, message: '请输入ID', trigger: 'blur' }
  ],
  name: [
    { required: true, message: '请输入门店名称', trigger: 'blur' }
  ],
  contact: [
    { required: true, message: '请输入联系人', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入电话', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  coBrand: [
    { required: true, message: '请选择合作品牌', trigger: 'change' }
  ],
  beautyTutor: [
    { required: true, message: '请输入美容导师', trigger: 'blur' }
  ],
  brandManager: [
    { required: true, message: '请输入品牌经理', trigger: 'blur' }
  ],
  annualAccount: [
    { required: true, message: '请输入年单账户', trigger: 'blur' },
    { pattern: /^¥?\d+(\.\d{1,2})?$/, message: '请输入正确的金额格式（如¥1234.56或1234.56）', trigger: 'blur' }
  ],
  policyAccount: [
    { required: true, message: '请输入政策账户', trigger: 'blur' },
    { pattern: /^¥?\d+(\.\d{1,2})?$/, message: '请输入正确的金额格式', trigger: 'blur' }
  ],
  cashAccount: [
    { required: true, message: '请输入现金账户', trigger: 'blur' },
    { pattern: /^¥?\d+(\.\d{1,2})?$/, message: '请输入正确的金额格式', trigger: 'blur' }
  ],
  retailAccount: [
    { required: true, message: '请输入零售价账户', trigger: 'blur' },
    { pattern: /^¥?\d+(\.\d{1,2})?$/, message: '请输入正确的金额格式', trigger: 'blur' }
  ],
  deliveryAccount: [
    { required: true, message: '请输入配送账户', trigger: 'blur' },
    { pattern: /^¥?\d+(\.\d{1,2})?$/, message: '请输入正确的金额格式', trigger: 'blur' }
  ],
  giftCash: [
    { required: true, message: '请输入赠送现金', trigger: 'blur' },
    { pattern: /^¥?\d+(\.\d{1,2})?$/, message: '请输入正确的金额格式', trigger: 'blur' }
  ],
  arrears: [
    { required: true, message: '请输入欠款', trigger: 'blur' },
    { pattern: /^¥?\d+(\.\d{1,2})?$/, message: '请输入正确的金额格式', trigger: 'blur' }
  ],
  address: [
    { required: true, message: '请输入地址', trigger: 'blur' }
  ],
  province: [
    { required: true, message: '请选择省份', trigger: 'change' }
  ],
  city: [
    { required: true, message: '请选择城市', trigger: 'change' }
  ],
  district: [
    { required: true, message: '请选择区域', trigger: 'change' }
  ],
  county: [
    { required: true, message: '请选择县区', trigger: 'change' }
  ]
});

// 删除相关
const deleteDialogVisible = ref(false);
const deleteTarget = ref(null);

// 拉黑相关
const blacklistDialogVisible = ref(false);
const blacklistTarget = ref(null);

// 打开新增弹窗
const openAddDialog = () => {
  dialogTitle.value = '新增美容院';
  isEdit.value = false;
  formData.id = '';
  formData.name = '';
  formData.contact = '';
  formData.phone = '';
  formData.coBrand = '';
  formData.beautyTutor = '';
  formData.brandManager = '';
  formData.annualAccount = '';
  formData.policyAccount = '';
  formData.cashAccount = '';
  formData.retailAccount = '';
  formData.deliveryAccount = '';
  formData.giftCash = '';
  formData.arrears = '';
  formData.address = '';
  formData.province = '';
  formData.city = '';
  formData.district = '';
  formData.county = '';
  formDialogVisible.value = true;
};

// 打开编辑弹窗
const openEditDialog = (row) => {
  dialogTitle.value = '编辑美容院';
  isEdit.value = true;
  formData.id = row.id;
  formData.name = row.name;
  formData.contact = row.contact;
  formData.phone = row.phone;
  formData.coBrand = row.coBrand;
  formData.beautyTutor = row.beautyTutor;
  formData.brandManager = row.brandManager;
  formData.annualAccount = row.annualAccount;
  formData.policyAccount = row.policyAccount;
  formData.cashAccount = row.cashAccount;
  formData.retailAccount = row.retailAccount;
  formData.deliveryAccount = row.deliveryAccount;
  formData.giftCash = row.giftCash;
  formData.arrears = row.arrears;
  formData.address = row.address;
  formData.province = row.province;
  formData.city = row.city;
  formData.district = row.district;
  formData.county = row.county;
  
  // 加载表单地区数据
  loadFormCities(row.province);
  loadFormDistricts(row.city);
  loadFormCounties(row.district);
  
  formDialogVisible.value = true;
};

// 提交表单
const submitForm = async () => {
  try {
    await formRef.value.validate();
    
    if (isEdit.value) {
      // 编辑操作
      const index = tableData.value.findIndex(item => item.id === formData.id);
      if (index !== -1) {
        tableData.value[index] = {
          ...formData,
          address: `${formData.province}${formData.city}${formData.district}${formData.county}${formData.address}`
        };
        ElMessage.success('编辑成功');
      }
    } else {
      // 新增操作
      const newId = `Mcc${tableData.value.length + 1}`;
      tableData.value.push({
        ...formData,
        id: newId,
        address: `${formData.province}${formData.city}${formData.district}${formData.county}${formData.address}`
      });
      ElMessage.success('新增成功');
    }
    
    formDialogVisible.value = false;
  } catch (error) {
    return;
  }
};

// 打开删除弹窗
const openDeleteDialog = (row) => {
  deleteTarget.value = row;
  deleteDialogVisible.value = true;
};

// 确认删除
const confirmDelete = () => {
  const index = tableData.value.findIndex(item => item.id === deleteTarget.value.id);
  if (index !== -1) {
    tableData.value.splice(index, 1);
    ElMessage.success('删除成功');
  }
  deleteDialogVisible.value = false;
  deleteTarget.value = null;
};

// 打开拉黑弹窗
const handleBlacklist = (row) => {
  blacklistTarget.value = row;
  blacklistDialogVisible.value = true;
};

// 批量拉黑
const handleBatchBlacklist = () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请选择要拉黑的美容院');
    return;
  }
  ElMessageBox.confirm(
    `确定要拉黑选中的 ${selectedRows.value.length} 家美容院吗？`,
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    selectedRows.value.forEach(row => {
      const index = tableData.value.findIndex(item => item.id === row.id);
      if (index !== -1) {
        tableData.value[index].blacklisted = true;
      }
    });
    ElMessage.success('批量拉黑成功');
    selectedRows.value = [];
  });
};

// 确认拉黑
const confirmBlacklist = () => {
  const index = tableData.value.findIndex(item => item.id === blacklistTarget.value.id);
  if (index !== -1) {
    tableData.value[index].blacklisted = true;
    ElMessage.success('拉黑成功');
  }
  blacklistDialogVisible.value = false;
  blacklistTarget.value = null;
};

// 批量删除
const handleBatchDelete = () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请选择要删除的美容院');
    return;
  }
  ElMessageBox.confirm(
    `确定要删除选中的 ${selectedRows.value.length} 家美容院吗？`,
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'danger'
    }
  ).then(() => {
    const ids = selectedRows.value.map(item => item.id);
    tableData.value = tableData.value.filter(item => !ids.includes(item.id));
    ElMessage.success('批量删除成功');
    selectedRows.value = [];
  });
};

// 选择项变化
const handleSelectionChange = (rows) => {
  selectedRows.value = rows;
};

// 搜索操作
const handleSearch = () => {
  currentPage.value = 1;
};

// 重置筛选条件
const resetFilter = () => {
  selectedBrands.value = [];
  province.value = '';
  city.value = '';
  district.value = '';
  county.value = '';
  searchKeyword.value = '';
  currentPage.value = 1;
};

// 处理分页大小变化
const handleSizeChange = (val) => {
  pageSize.value = val;
  currentPage.value = 1;
};

// 处理页码变化
const handleCurrentChange = (val) => {
  currentPage.value = val;
};

// 跳转到指定页
const jumpToPage = () => {
  if (jumpPage.value < 1 || jumpPage.value > totalPages.value) {
    ElMessage.warning('页码超出范围');
    return;
  }
  currentPage.value = jumpPage.value;
};

// 返回
const handleReturn = () => {
  ElMessage.info('返回上一页');
};

// 表格样式配置
const tableHeaderStyle = {
  backgroundColor: '#f5f7fa',
  fontWeight: 'bold',
  color: '#303133'
};

const tableCellStyle = {
  padding: '8px 0'
};

const viewDetail = (row) => {
  // ElMessage.info(`查看美容院详情：${row.name}`);

//   router.push({ name: 'SalonDetail', params: { id: row.id } });
router.push(`/beautySalonManagement/beautySalonDetails?id=${row.id}`).catch(error => console.log(error))
};

</script>

<style scoped>
 
.beauty-salon-list {
  padding: 20px;
  background-color: #fff;
  min-height: 100vh;
  font-size: 14px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
}

.page-title {
  font-size: 20px;
  font-weight: 600;
  color: #303133;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.filter-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 16px;
  margin-bottom: 20px;
}

.filter-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.filter-label {
  color: #606266;
  font-weight: 500;
}

.checkbox-group {
  display: flex;
  gap: 10px;
}

.region-select-group {
  display: flex;
  gap: 8px;
}

.region-select {
  width: 120px;
}

.search-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-input {
  width: 240px;
}

.batch-action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.batch-danger-group {
  display: flex;
  gap: 8px;
}

.table-container {
  margin-bottom: 20px;
}

.total-row {
  display: flex;
  border: 1px solid #EBEEF5;
  border-top: none;
  background-color: #FAFAFA;
  padding: 10px 0;
  margin-top: -1px;
}

.total-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #EBEEF5;
}

.total-label {
  font-weight: 500;
  color: #303133;
}

.pagination-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

.pagination-info {
  color: #606266;
}

.jump-page {
  display: flex;
  align-items: center;
  gap: 5px;
}

.jump-input {
  width: 60px;
}

.salon-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-section {
  margin-bottom: 16px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}

.form-row {
  display: flex;
  gap: 16px;
}

.form-item {
  flex: 1;
}

.region-form-row {
  display: flex;
  gap: 12px;
}

.region-form-item {
  flex: 1;
}

.account-item {
  flex: 1;
}

.text-warning {
  color: #e6a23c;
  font-weight: bold;
}

.text-danger {
  color: #f56c6c;
  font-size: 14px;
  margin-top: 10px;
}

/* 表格样式调整 - 重点添加部分 */
.table-container {
  margin-bottom: 20px;
  font-size: 10px; /* 表格整体字体大小 */
}

/* 表格单元格内容字体 */
:deep(.el-table td) {
  font-size: 12px !important;
  padding: 6px 0; /* 配合小字体调整内边距，避免内容拥挤 */
}

/* 表格表头字体 */
:deep(.el-table th) {
  font-size: 12px !important;
}

/* 合计行字体 */
.total-row {
  font-size: 14px;
}

/* 其他原有样式保持不变 */
.beauty-salon-list {
  padding: 20px;
  background-color: #fff;
  min-height: 100vh;
  font-size: 14px;
}

</style>